<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div>前后端交互</div>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		/* 
			基于Promise发送Ajax请求
		*/


		function queryData(url) {
			var p = new Promise(function(resolve, reject) {
				// 创建Ajax对象
				var xhr = new XMLHttpRequest();
				// 指定一个回调函数【在里面处理响应的结果！】、
				// Ajax 提供的事件【onreadystatechange】 
				xhr.onreadystatechange = function() {
					// 把不关心的状态都屏蔽掉
					// Ajax的状态码 xhr.readyState【获取Ajax的状态码】
					if (xhr.readyState != 4) return;

					
					if (xhr.readyState == 4 && xhr.status == 200) {
						// 正常的数据
						resolve(xhr.responseText); // 拿到服务器响应的数据
					} else {
						// 处理异常的信息
						reject("服务器异常！")
					}
				};
				// 准备发送前的参数
				xhr.open('get', url);
				xhr.send(null);

			})
			return p;
		}

		// 要拿到返回的结果， 需要进行调用 
	// queryData('http://localhost:3000/data')
	// 	.then(function(data) {
	// 		// 正常的数据
	// 		console.log(data)
	// 	}, function(info) {
	// 		console.log(info)
	// 	})
	//===========================================
		// 发送多个Ajax请求的场景
		queryData('http://localhost:3000/data')
			.then(function(data) {
				// 现在只考虑正常的情况！
				// 第一次调用返回的数据
				console.log(data)
				return queryData('http://localhost:3000/data1')
			})
			.then(function(data) {
				console.log(data)
				return queryData('http://localhost:3000/data2')
			})
			.then(function(data) {
				console.log(data)
			});

		// function queryData(url) {
		// 	var p = new Promise(function(resolve, reject) {
		// 		// 创建Ajax对象
		// 		var xhr = new XMLHttpRequest();
		// 		// 指定一个回调函数【在里面处理响应的结果！】、
		// 		xhr.onreadystatechange = function() {
		// 			// 把不关心的状态都屏蔽掉
		// 			if (xhr.readyState != 4) return;

					
		// 			if (xhr.readyState == 4 && xhr.status == 200) {
		// 				// 正常的数据
		// 				resolve(xhr.responseText); // 拿到服务器响应的数据
		// 			} else {
		// 				// 处理异常的信息
		// 				reject("服务器异常！")
		// 			}
		// 		};
		// 		// 准备发送前的参数
		// 		xhr.open('get', url);
		// 		xhr.send(null);

		// 	})
		// 	return p;
		// }

		// 

		// Promise处理原生的Ajax

	// 拿到返回的结果， 需要进行调用 
	// queryData('http://localhost:3000/data')
	// 	.then(function(data) {
	// 		// 正常的数据
	// 		console.log(data)
	// 	}, function(info) {
	// 		console.log(info)
	// 	})





	// function () {
	// 	return new Promise (function (resolve, reject) {
	// 		var xhr = new XMLHttpRequest();
	// 		xhr.onreadystatechange = function () {
	// 			if (xhr.readyState !=4) return;
	// 			if (xhr.status === 200) {
	// 				resolve(xhr.responseText)
	// 			} else {
	// 				reject("发生错误！")
	// 			}
	// 		}
	// 		xhr.open('get', '/data')
	// 		xhr.send(null);
	// 	})
	// }
	</script>
</body>
</html>